import React, { useState, useEffect } from 'react';
import { ServiceStorageStyled } from './style';
import ServiceStoragePie from './ServiceStoragePie';
import { ServiceStorageDTO } from '@/services/types';
import { getServiceStorageDetail } from '@/services/index';
import { useSelector } from 'react-redux';

const ServiceStorage = () => {
  const [serviceUseDbStoreage, setServiceUseDbStoreage] = useState<ServiceStorageDTO>({});
  const [serviceStoreage, setServiceStoreage] = useState<ServiceStorageDTO>({});

  const fondName = useSelector((state: any) => state.mutifonds.fondName);
  // useEffect(() => {
  //     getServiceStorageDetail().then(res => {
  //         setServiceStoreage(res[0]);
  //         setServiceUseDbStoreage(res[1]);
  //     });
  // }, [serviceStoreage, serviceUseDbStoreage]);
  useEffect(() => {
    getServiceStorageDetail().then((res) => {
      // res=[
      //     {
      //         "percent": "1.00",
      //         "storage": [
      //             {
      //                 "sort": 0,
      //                 "name": "未使用",
      //                 "number": 19720,
      //                 "perCentNumber": 0
      //             },
      //             {
      //                 "sort": 0,
      //                 "name": "已使用",
      //                 "number": 19290,
      //                 "perCentNumber": 0
      //             }
      //         ]
      //     },
      //     {
      //         "percent": "4.29",
      //         "storage": [
      //             {
      //                 "sort": 0,
      //                 "name": "数据库使用",
      //                 "number": 98,
      //                 "perCentNumber": 0
      //             },
      //             {
      //                 "sort": 0,
      //                 "name": "其余使用",
      //                 "number": 2185,
      //                 "perCentNumber": 0
      //             }
      //         ]
      //     }
      // ];
      setServiceStoreage(res[0]);
      setServiceUseDbStoreage(res[1]);
    });
  }, [fondName]);

  function formatDataSize(sizeInMBytes: any) {
    if (sizeInMBytes >= 1024 * 1024) {
      return (sizeInMBytes / (1024 * 1024)).toFixed(2) + ' TB';
    } else if (sizeInMBytes >= 1024) {
      return (sizeInMBytes / 1024).toFixed(2) + ' GB';
    } else {
      return sizeInMBytes + ' MB';
    }
  }

  // 示例用法
  // const dataSizeInBytes = 3200 * 1024 * 1024 * 1024;
  // console.log(formatDataSize(dataSizeInBytes));

  return (
    <ServiceStorageStyled>
      <div className='serviceStoreage'>
        <div className='serviceUsing'>
          <div className='serviceUsingItem'>
            服务器总使用
            <div className='serviceUsingNumber'>{formatDataSize((serviceStoreage.storage || [])[1]?.number)}</div>
          </div>
          <div className='serviceUsingItem'>
            数据库使用
            <div className='serviceUsingNumber'>{formatDataSize((serviceUseDbStoreage.storage || [])[0]?.number)}</div>
            {/* (占比 <span className='serviceUsingNumber'>{serviceUseDbStoreage.percent}</span>%) */}
          </div>
          <div className='serviceUsingItem'>
            文件存储使用
            <div className='serviceUsingNumber'>{formatDataSize((serviceUseDbStoreage.storage || [])[1]?.number)}</div>
          </div>
        </div>
        <div>
          <ServiceStoragePie
            title='服务器使用率'
            percent={serviceStoreage.percent || ''}
            data={serviceStoreage.storage || []}
          ></ServiceStoragePie>
        </div>
      </div>
    </ServiceStorageStyled>
  );
};

export default ServiceStorage;
